<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">	
		<title>Textarea with _BidiSupport</title>

		<style type="text/css">
			@import "../../../../dojo/resources/dojo.css";
			@import "../../../../dijit/themes/tundra/tundra.css";
		</style>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../../dojo/dojo.js"
			data-dojo-config="parseOnLoad: true, isDebug: true">
		</script>		

		<script type="text/javascript">
			dojo.require("dijit.dijit"); // optimize: load dijit layer
			dojo.require("dijit.form.Textarea");
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.form.SimpleTextarea");
			dojo.require("dijit.layout.ContentPane");
			dojo.require("dijit.layout.TabContainer");
			dojo.require("dojo.parser");
			dojo.require("doh.runner");
			dojo.require("dijit.form.ComboBox");
			dojo.require("dijit._BidiSupport");

			dojo.ready(function(){
				doh.register("parse", function(){
					dojo.parser.parse();

					programmaticTextareaLTR = new dijit.form.Textarea({
						id: "blankTaP",
						name: "blankTaP",
						style:{width:"30em"},
						textDir:"ltr",
						value: ""
					}, "blankTaP");

					programmaticTextareaRTL = new dijit.form.Textarea({
						id: "filledTaP",
						name: "filledTaP",
						style:{width:"30em"},
						textDir:"ltr",
						value: "created programmatically!"
					}, "filledTaP");

					programmaticSTaB = new dijit.form.SimpleTextarea({
						id: "blankSTaP",
						name: "blankSTaP",
						style:{width:"30em"},
						rows:"2",
						textDir:"ltr",
						value: ""
					}, "blankSTaP");

					programmaticSTaF = new dijit.form.SimpleTextarea({
						id: "filledSTaP",
						name: "filledSTaP",
						style:{width:"30em"},
						rows:"2",
						textDir:"ltr",
						value: "created programmatically!"
					}, "filledSTaP");

					programmaticTextBoxB = new dijit.form.TextBox({
						id: "blankTbP",
						name: "blankTbP",
						style:{width:"30em"},
						textDir:"ltr",
						value: ""
					}, "blankTbP");

					programmaticTextBoxF = new dijit.form.TextBox({
						id: "filledTbP",
						name: "filledTbP",
						style:{width:"30em"},
						textDir:"ltr",
						value: "\u05e0\u05d5\u05e6\u05e8\u0020\u05e4\u05e8\u05d5\u05d2\u05de\u05e8\u05d8\u05d9\u0021"
					}, "filledTbP");
				});

				var blankTaP
					, filledTaP
					, blankTaM
					, filledlTaM
					, comboBM
					, blankTbM
					, filledTbM
					, blankStaM
					, filledStaM
					, blankTbP
					, filledTbP
					, blankSTaP
					, filledSTaP
					, combo;	
					
				dijit.byId("comboBM").toggleDropDown();
				dijit.byId("comboBM").closeDropDown();
			
				doh.register("test dynamic change of textDir initial", [
					{
						name: "initial textDir of all the widgets",

						setUp: function(){
							blankTaP = dijit.byId("blankTaP");
							filledTaP = dijit.byId("filledTaP");
							blankTaM = dijit.byId("blankTaM");
							filledlTaM = dijit.byId("filledlTaM");
							comboBM = dijit.byId("comboBM");
							blankTbM = dijit.byId("blankTbM");
							filledTbM = dijit.byId("filledTbM");
							blankStaM = dijit.byId("blankStaM");
							filledStaM = dijit.byId("filledStaM");
							blankTbP = dijit.byId("blankTbP");
							filledTbP = dijit.byId("filledTbP");
							blankSTaP = dijit.byId("blankSTaP");
							filledSTaP = dijit.byId("filledSTaP");	

							combo = dijit.byId("comboBM");
						},
						
						runTest: function(){
							doh.is("ltr",blankTaP.textDir, "direction of : blankTaP");
							doh.is("ltr",filledTaP.textDir, "direction of : filledTaP");
							doh.is("ltr",blankTaM.textDir, "direction of : blankTaM");
							doh.is("ltr",filledlTaM.textDir, "direction of : filledlTaM");
							doh.is("ltr",comboBM.textDir, "direction of : comboBM");
							doh.is("ltr",blankTbM.textDir, "direction of : blankTbM");
							doh.is("ltr",filledTbM.textDir, "direction of : filledTbM");
							doh.is("ltr",blankStaM.textDir, "direction of : blankStaM");
							doh.is("ltr",filledStaM.textDir, "direction of : filledStaM");
							doh.is("ltr",blankTbP.textDir, "direction of : blankTbP");
							doh.is("ltr",filledTbP.textDir, "direction of : filledTbP");
							doh.is("ltr",blankSTaP.textDir, "direction of : blankSTaP");
							doh.is("ltr",filledSTaP.textDir, "direction of : filledSTaP");
							
							doh.is("ltr",combo.dropDown.textDir, "direction of : combo.dropDown");
							
							var d = new doh.Deferred();

							combo.toggleDropDown();
							setTimeout(d.getTestCallback(function(){
								//combo.toggleDropDown();
								dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
									// so it will check only the options
									if(node.item){
										doh.is("ltr", node.dir, node.textContent);
									}
								});
							}), 100);
							return d;
						},
						
						tearDown:function(){
							combo.closeDropDown();
						}
					}
				]);

				doh.register("test dynamic change of textDir to RTL", [
					{
						name: "set textDir dynamically to RTL",

						setUp: function(){
							var buttonRTL = dojo.byId("swithchTD_RTL");
							buttonRTL.click();
						},

						runTest: function(){

							doh.is("rtl",blankTaP.textDir, "direction of : blankTaP");
							doh.is("rtl",filledTaP.textDir, "direction of : filledTaP");
							doh.is("rtl",blankTaM.textDir, "direction of : blankTaM");
							doh.is("rtl",filledlTaM.textDir, "direction of : filledlTaM");
							doh.is("rtl",comboBM.textDir, "direction of : comboBM");
							doh.is("rtl",blankTbM.textDir, "direction of : blankTbM");
							doh.is("rtl",filledTbM.textDir, "direction of : filledTbM");
							doh.is("rtl",blankStaM.textDir, "direction of : blankStaM");
							doh.is("rtl",filledStaM.textDir, "direction of : filledStaM");
							doh.is("rtl",blankTbP.textDir, "direction of : blankTbP");
							doh.is("rtl",filledTbP.textDir, "direction of : filledTbP");
							doh.is("rtl",blankSTaP.textDir, "direction of : blankSTaP");
							doh.is("rtl",filledSTaP.textDir, "direction of : filledSTaP");

							doh.is("rtl",combo.dropDown.textDir, "direction of : combo.dropDown");
						}
					},
					{
						name: "check focusNode.dir == RTL",

						runTest: function(){

							doh.is("rtl",blankTaP.focusNode.dir, "direction of : blankTaP");
							doh.is("rtl",filledTaP.focusNode.dir, "direction of : filledTaP");
							doh.is("rtl",blankTaM.focusNode.dir, "direction of : blankTaM");
							doh.is("rtl",filledlTaM.focusNode.dir, "direction of : filledlTaM");
							doh.is("rtl",comboBM.focusNode.dir, "direction of : comboBM");
							doh.is("rtl",blankTbM.focusNode.dir, "direction of : blankTbM");
							doh.is("rtl",filledTbM.focusNode.dir, "direction of : filledTbM");
							doh.is("rtl",blankStaM.focusNode.dir, "direction of : blankStaM");
							doh.is("rtl",filledStaM.focusNode.dir, "direction of : filledStaM");
							doh.is("rtl",blankTbP.focusNode.dir, "direction of : blankTbP");
							doh.is("rtl",filledTbP.focusNode.dir, "direction of : filledTbP");
							doh.is("rtl",blankSTaP.focusNode.dir, "direction of : blankSTaP");
							doh.is("rtl",filledSTaP.focusNode.dir, "direction of : filledSTaP");

							var d = new doh.Deferred();

							combo.toggleDropDown();
							setTimeout(d.getTestCallback(function(){
								//combo.toggleDropDown();
								dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
									// so it will check only the options
									if(node.item){
										doh.is("rtl", node.dir, node.textContent);
									}
								});
							}), 100);
							return d;
						},
						
						tearDown:function(){
							combo.closeDropDown();
						}
						
					}
				]);

				doh.register("test dynamic change of textDir to LTR", [
					{
						name: "set textDir dynamically to LTR",

						setUp: function(){
							var buttonLTR = dojo.byId("swithchTD_LTR");
							buttonLTR.click();
						},

						runTest: function(){

							doh.is("ltr",blankTaP.textDir, "direction of : blankTaP");
							doh.is("ltr",filledTaP.textDir, "direction of : filledTaP");
							doh.is("ltr",blankTaM.textDir, "direction of : blankTaM");
							doh.is("ltr",filledlTaM.textDir, "direction of : filledlTaM");
							doh.is("ltr",comboBM.textDir, "direction of : comboBM");
							doh.is("ltr",blankTbM.textDir, "direction of : blankTbM");
							doh.is("ltr",filledTbM.textDir, "direction of : filledTbM");
							doh.is("ltr",blankStaM.textDir, "direction of : blankStaM");
							doh.is("ltr",filledStaM.textDir, "direction of : filledStaM");
							doh.is("ltr",blankTbP.textDir, "direction of : blankTbP");
							doh.is("ltr",filledTbP.textDir, "direction of : filledTbP");
							doh.is("ltr",blankSTaP.textDir, "direction of : blankSTaP");
							doh.is("ltr",filledSTaP.textDir, "direction of : filledSTaP");

							doh.is("ltr",combo.dropDown.textDir, "direction of : combo.dropDown");
						}
					},
					{
						name: "check focusNode.dir == LTR",

						runTest: function(){

							doh.is("ltr",blankTaP.focusNode.dir, "direction of : blankTaP");
							doh.is("ltr",filledTaP.focusNode.dir, "direction of : filledTaP");
							doh.is("ltr",blankTaM.focusNode.dir, "direction of : blankTaM");
							doh.is("ltr",filledlTaM.focusNode.dir, "direction of : filledlTaM");
							doh.is("ltr",comboBM.focusNode.dir, "direction of : comboBM");
							doh.is("ltr",blankTbM.focusNode.dir, "direction of : blankTbM");
							doh.is("ltr",filledTbM.focusNode.dir, "direction of : filledTbM");
							doh.is("ltr",blankStaM.focusNode.dir, "direction of : blankStaM");
							doh.is("ltr",filledStaM.focusNode.dir, "direction of : filledStaM");
							doh.is("ltr",blankTbP.focusNode.dir, "direction of : blankTbP");
							doh.is("ltr",filledTbP.focusNode.dir, "direction of : filledTbP");
							doh.is("ltr",blankSTaP.focusNode.dir, "direction of : blankSTaP");
							doh.is("ltr",filledSTaP.focusNode.dir, "direction of : filledSTaP");


							var d = new doh.Deferred();

							combo.toggleDropDown();
							setTimeout(d.getTestCallback(function(){
								//combo.toggleDropDown();
								dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
									// so it will check only the options
									if(node.item){
										doh.is("ltr", node.dir, node.textContent);
									}
								});
							}), 100);
							return d;
						},
						
						tearDown:function(){
							combo.closeDropDown();
						}
					}
				]);

				doh.register("test dynamic change of textDir", [
					{
						name: "set textDir dynamically to auto",

						setUp: function(){
							var buttonAUTO = dojo.byId("switchTD_AUTO");
							buttonAUTO.click();
						},
					
						runTest: function(){

							doh.is("auto",blankTaP.textDir, "direction of : blankTaP");
							doh.is("auto",filledTaP.textDir, "direction of : filledTaP");
							doh.is("auto",blankTaM.textDir, "direction of : blankTaM");
							doh.is("auto",filledlTaM.textDir, "direction of : filledlTaM");
							doh.is("auto",comboBM.textDir, "direction of : comboBM");
							doh.is("auto",blankTbM.textDir, "direction of : blankTbM");
							doh.is("auto",filledTbM.textDir, "direction of : filledTbM");
							doh.is("auto",blankStaM.textDir, "direction of : blankStaM");
							doh.is("auto",filledStaM.textDir, "direction of : filledStaM");
							doh.is("auto",blankTbP.textDir, "direction of : blankTbP");
							doh.is("auto",filledTbP.textDir, "direction of : filledTbP");
							doh.is("auto",blankSTaP.textDir, "direction of : blankSTaP");
							doh.is("auto",filledSTaP.textDir, "direction of : filledSTaP");

							doh.is("auto",combo.dropDown.textDir, "direction of : combo.dropDown");
						}
					},
					{
						name: "check focusNode.dir of textDir == AUTO",

						runTest: function(){

							doh.is(filledTaP._checkContextual(filledTaP.value),filledTaP.focusNode.dir, "direction of : filledTaP");
							doh.is(filledlTaM._checkContextual(filledlTaM.value),filledlTaM.focusNode.dir, "direction of : filledlTaM");
							doh.is(comboBM._checkContextual(comboBM.displayedValue),comboBM.focusNode.dir, "direction of : comboBM");
							doh.is(filledTbM._checkContextual(filledTbM.value),filledTbM.focusNode.dir, "direction of : filledTbM");
							doh.is(filledStaM._checkContextual(filledStaM.value),filledStaM.focusNode.dir, "direction of : filledStaM");
							doh.is(filledTbP._checkContextual(filledTbP.value),filledTbP.focusNode.dir, "direction of : filledTbP");
							doh.is(filledSTaP._checkContextual(filledSTaP.value),filledSTaP.focusNode.dir, "direction of : filledSTaP");

							var d = new doh.Deferred();

							combo.toggleDropDown();
							setTimeout(d.getTestCallback(function(){
								var contextualDir;

								dojo.forEach(combo.dropDown.domNode.childNodes, function(node){
									// so it will check only the options
									if(node.item){
											contextualDir = this.getTextDir(node.innerText || node.textContent || "");
											doh.is(contextualDir, node.dir, node.innerText || node.textContent || "");
									}
								},combo);							
							}), 100);
							return d;
						},
						
						tearDown:function(){
							combo.closeDropDown();
						}
					}
				]);				

				doh.run();
			});
		</script>
	</head>
	<body class="tundra" data-dojo-textdir="ltr">
		<h1 class="testTitle">Dynamically changed textDir.</h1>
		
		<h2 class="testTitle">Textarea</h2>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="filledlTaM">dijit.form.Textarea, initially filled, markup created</label>
						<br>
						<textarea data-dojo-type="dijit/form/Textarea" id="filledlTaM" data-dojo-props='textDir:"ltr", style:{width:"30em"}'>Hello world!</textarea>
						<br>
					</th>
					<th>
						<label >dijit.form.Textarea, initially filled, programmatically created:</label>
						<br>
						<textarea id="filledTaP"></textarea>
						<br>
					</th>
				</tr>
				<tr>
					<th>
						<label for="blankTaM">dijit.form.Textarea, initially blank:</label>
						<br>
						<textarea data-dojo-type="dijit/form/Textarea" id="blankTaM" data-dojo-props='textDir:"ltr", style:{width:"30em"}'></textarea>
						<br>
					</th>
					<th>
						<label for="blankTaP">dijit.form.Textarea, initially blank, programmatically created:</label>
						<br>
						<textarea id="blankTaP"></textarea>
						<br>
					</th>
				</tr>
			</table>
		</div>
		<br>
		<br>

		<h2 class="testTitle">TextBox</h2>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label for="filledTbM">dijit.form.TextBox, initially filled, markup created:</label>
						<br>
						<input data-dojo-type="dijit/form/TextBox" id="filledTbM" data-dojo-props='name:"filledTbM", value:"blah.", style:{width:"30em"},textDir:"ltr"'/>
						<br>
					</th>
					<th>
						<label >dijit.form.TextBox, initially filled, programmatically created:</label>
						<br>
						<textarea id="filledTbP"></textarea>
						<br>
					</th>
				</tr>
				<tr>
					<th>
						<label for="blankTbM">dijit.form.TextBox, initially blank, markup created:</label>
						<br>
						<input data-dojo-type="dijit/form/TextBox" id="blankTbM" data-dojo-props='name:"blankTbM", style:{width:"30em"}, value:"", textDir:"ltr"'/>
						<br>
					</th>
					<th>
						<label for="blankTaP">dijit.form.Textarea, initially blank, programmatically created:</label>
						<br>
						<textarea id="blankTbP"></textarea>
						<br>
					</th>
				</tr>
			</table>
		</div>
		<br>
		<br>
		<h2 class="testTitle">SimpleTextarea</h2>
		<br>
		<div class="testExample">
			<table>
				<tr>
					<th>
						<label>dijit.form.SimpleTextarea, initially filled, markup created</label>
						<br>
						<textarea id="filledStaM" data-dojo-type="dijit/form/SimpleTextarea"
							data-dojo-props='name:"filledStaM",rows:"2", style:{width:"30em"}
							'>&#1513;&#1500;&#1493;&#1501; &#1506;&#1493;&#1500;&#1501;, &#1513;&#1500;&#1493;&#1501; &#1500;&#1499;&#1493;&#1500;&#1501; &#1488;&#1497;&#1503; &#1497;&#1493;&#1514;&#1512; &#1499;&#1497;&#1507; &#1502;&#1491;&#1493;&#1490;'&#1493;!
						</textarea>
						<br>
					</th>
					<th>
						<label >dijit.form.SimpleTextarea, initially filled, programmatically created:</label>
						<br>
						<textarea id="filledSTaP"></textarea>
						<br>
					</th>
				</tr>
				<tr>
					<th>
						<label for="blankTbM">dijit.form.SimpleTextarea, initially blank, markup created:</label>
						<br>
						<textarea id="blankStaM" data-dojo-type="dijit/form/SimpleTextarea"
							data-dojo-props='name:"blankStaM",rows:"2", style:{width:"30em"},
							textDir:"ltr"'>
						</textarea>
					</th>
					<th>
						<label>dijit.form.Textarea, initially blank, programmatically created:</label>
						<br>
						<textarea id="blankSTaP"></textarea>
						<br>
					</th>
				</tr>
			</table>
		</div>
				<br>
		<br>
		<label for="comboBM">dijit.form.ComboBox, markup</label>
		<br>
		<select id="comboBM" 
			data-dojo-type="dijit/form/ComboBox"
			data-dojo-props='name:"comboBM",
			textDir:"ltr"'>
				<option >Apples!</option>
				<option >Oranges!</option>
				<option selected>Pears!</option>
				<option >&#1513;&#1500;&#1493;&#1501; &#1500;&#1499;&#1501;!</option>
				<option >&#1514;&#1508;&#1493;&#1495; &#1488;&#1491;&#1502;&#1492;!</option>
		</select>
		<br>
		<br>
		<br>

		<input id="swithchTD_RTL" type="button" value="change textDir 2 RTL"
			onclick="dijit.byId('blankTaP').set('textDir','rtl');
				dijit.byId('filledTaP').set('textDir','rtl'); 
				dijit.byId('blankTaM').set('textDir','rtl'); 
				dijit.byId('filledlTaM').set('textDir','rtl');
				dijit.byId('comboBM').set('textDir','rtl');
				dijit.byId('blankTbM').set('textDir','rtl');
				dijit.byId('filledTbM').set('textDir','rtl');
				dijit.byId('blankStaM').set('textDir','rtl');
				dijit.byId('filledStaM').set('textDir','rtl');
				dijit.byId('blankTbP').set('textDir','rtl');
				dijit.byId('filledTbP').set('textDir','rtl');
				dijit.byId('blankSTaP').set('textDir','rtl');
				dijit.byId('filledSTaP').set('textDir','rtl');
			"/>
		
		<input id="swithchTD_LTR" type="button" value="change textDir 2 LTR"
			onclick="dijit.byId('blankTaP').set('textDir','ltr');
				dijit.byId('filledTaP').set('textDir','ltr'); 
				dijit.byId('blankTaM').set('textDir','ltr'); 
				dijit.byId('filledlTaM').set('textDir','ltr');
				dijit.byId('comboBM').set('textDir','ltr');
				dijit.byId('blankTbM').set('textDir','ltr');
				dijit.byId('filledTbM').set('textDir','ltr');
				dijit.byId('blankStaM').set('textDir','ltr');
				dijit.byId('filledStaM').set('textDir','ltr');
				dijit.byId('blankTbP').set('textDir','ltr');
				dijit.byId('filledTbP').set('textDir','ltr');
				dijit.byId('blankSTaP').set('textDir','ltr');
				dijit.byId('filledSTaP').set('textDir','ltr');
			"/>
		
		<input id="switchTD_AUTO" type="button" value="change textDir 2 AUTO"
			onclick="dijit.byId('blankTaP').set('textDir','auto');
				dijit.byId('filledTaP').set('textDir','auto'); 
				dijit.byId('blankTaM').set('textDir','auto'); 
				dijit.byId('filledlTaM').set('textDir','auto');
				dijit.byId('comboBM').set('textDir','auto');
				dijit.byId('blankTbM').set('textDir','auto');
				dijit.byId('filledTbM').set('textDir','auto');
				dijit.byId('blankStaM').set('textDir','auto');
				dijit.byId('filledStaM').set('textDir','auto');
				dijit.byId('blankTbP').set('textDir','auto');
				dijit.byId('filledTbP').set('textDir','auto');
				dijit.byId('blankSTaP').set('textDir','auto');
				dijit.byId('filledSTaP').set('textDir','auto');
			"/>
	</body>
</html>
